<template>
	<view class="cardstyle" :style="{'background-color': bgColor}">
		<view class="titlebox">
			<view class="imgbox" v-if="mode==2">
				<image :src="showImage" @error="handleImageException"></image>
			</view>
			<view>
				<text :style="mode==3 ? 'color: #aaa;' : ''">{{title}}</text>
			</view>
		</view>
		<view class="adbox" v-if="mode==3" style="margin-top: 5rpx;">
			<view v-for="(item,index) in images" :key="index">
				<image :src="item" mode="aspectFill" @error="(e)=>handleImageError(index, e)"></image>
			</view>
		</view>
		<view class="tipsbox">
			<text style="color: #f00;" v-if="isTop">置顶</text>
			<text style="color: #00f;" v-if="mode==3">广告</text>
			<text :style="authorColor">{{author}}</text>
			<text v-if="mode!=3">{{comments}}评</text>
			<view style="flex:1; display: flex; justify-content: flex-end;">
				<text>{{time}}</text>
			</view>
		</view>
		<slot name="tips" v-if="showSearch"></slot>
	</view>
</template>

<script>
	export default {
		name: "NewsView",
		data() {
			return {
				defaultPic: "/static/default-image.png",
				failPic: "/static/fail-image.png",
				status: 'news',
				imageError: false
			};
		},
		computed: {
			showImage() {
				if (this.images[0]) {
					return this.imageError ? this.failPic : this.images[0]
				} else {
					return this.defaultPic
				}
			},
			authorColor() {
				const colorMap = {
					news: '#aaa',
					ad: '#00f'
				}
				return {
					color: colorMap[this.status] || '#f33'
				}
			}
		},
		mounted() {
			if (this.mode == 3) {
				this.status = "ad"
			}
		},
		methods: {
			handleImageException() {
				this.imageError = true;
			},
			handleImageError(index, e) {
				this.$set(this.images, index, this.failPic);
			}
		},
		props: {
			nid: {
				type: String,
				default: "000",
				required: true
			},
			title: {
				type: String,
				default: "新闻标题",
				required: true
			},
			mode: {
				type: Number,
				default: 1,
				required: true
			},
			isTop: {
				type: Boolean,
				default: false,
				required: true
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			comments: {
				type: Number,
				default: 0,
				required: true
			},
			time: {
				type: String,
				default: "2025.1.1"
			},
			images: {
				type: Array,
				default: () => []
			},
			showSearch: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#fff'
			}
		}
	}
</script>

<style>
	.adbox {
		display: flex;
		flex-direction: row;
		justify-content: space-around
	}

	.titlebox {
		display: flex;
		flex-direction: row;
		padding-left: 10px;
	}

	.imgbox {
		margin-right: 10px;
	}

	image {
		width: 100px;
		height: 70px;
		border-radius: 10rpx;
	}

	.cardstyle {
		display: flex;
		flex-direction: column;
		text-align: left;
		border-radius: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tipsbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		padding-left: 10px;
		margin-top: 5px;
	}

	.tipsbox text {
		margin-right: 10px;
		color: #aaa;
		font-size: 11px;
	}
</style>